@import "../global/global";

.ring-button-group {
  display: inline-block;
  position: relative;

  font-size: 0;
  white-space: nowrap;
}

.ring-button-group .ring-button {
  margin: 0 0 0 -1px;
  border-radius: 0;
}

.ring-button-group > .ring-button:first-child,
.ring-button-group > *:first-child .ring-button,
.ring-button-group .ring-button-group__first {
  margin: 0;
  border-top-left-radius: $ring-border-radius;
  border-bottom-left-radius: $ring-border-radius;
}

.ring-button-group > .ring-button:last-child,
.ring-button-group > *:last-child .ring-button,
.ring-button-group .ring-button-group__last {
  border-top-right-radius: $ring-border-radius;
  border-bottom-right-radius: $ring-border-radius;
}

// Caption element preceding the button group
.ring-button-group__caption {
  @include ring-font();
  margin-right: $ring-unit;

  &:empty {
    margin-right: 0;
  }
}

.ring-button-group .ring-button-group__caption + .ring-button {
  border-top-left-radius: $ring-border-radius;
  border-bottom-left-radius: $ring-border-radius;
}

.ring-button-group .ring-button_upper {
  position: relative;
}
